<template>
  <div>
    <h2>出勤率</h2>
    <table style="width: 100%;height:20px;">
      <tr><th>ID</th>
        <th>姓名</th>
        <th>出勤率</th></tr>
    </table>
    <vue-seamless-scroll :data="infoLi" class="seamless-warp" style="height: 300px">
      <ul class="item" :class-option="optionHover" style="width: 100%;position: relative;left: -9%;margin: 0">
        <li v-for="item in infoLi" style="display: flex;justify-content: space-around">
          <span v-text="item.id" ></span><span v-text="item.name"></span><span>{{item.attend}}</span>
        </li>
      </ul>
      <ul class="item" :class-option="optionHover" style="width: 100%;position: relative;left: -9%;margin: 0">
        <li v-for="item in infoLi" style="display: flex;justify-content: space-around">
          <span v-text="item.id" ></span><span v-text="item.name"></span><span>{{item.attend}}</span>
        </li>
      </ul>
    </vue-seamless-scroll>
  </div>
</template>

<script>
export default {
  name: "Attendance1",
  props:{
    infoLi:{
      type : Array,
      default(){
        return[]
      }
    }
  },
  data(){
    return{
    }
  },
  computed: {
    optionHover () {
      return {
        step:3
      }
    }
  }
}
</script>

<style scoped>
li{
  width: 100%;
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
li:nth-child(2n){
  background-color: rgba(255, 251, 240, 0.3);
}
span{
  width: 18%;
  text-align: center;
  color: cyan;
  font-size: large;
}
.seamless-warp {
  width: 100%;
  height: 249px;
  overflow: hidden;
}

table{
  width: 100%;
}
::-webkit-scrollbar {
  width: 0 !important;
}
::-webkit-scrollbar {
  width: 0 !important;height: 0;
}

th{
  color: cyan;
  width: 33%;
  text-align: center;
}
td{
  color: white;
  text-align: center;
}
h2{
  color: cyan;
  text-align: center;
}
tr:nth-child(2n){
  background-color: rgba(255, 251, 240, 0.3);
}
</style>
